<template>
  <Row :gutter="15">
    <Col span="4" class="demo-tabs-style1" style="padding:1px;">
      <Tabs type="card">
        <TabPane label="源数据">
          <Tree :data="data1"></Tree>
        </TabPane>
        <TabPane label="目标数据">
          <Tree :data="data1"></Tree>
        </TabPane>
      </Tabs>
    </Col>
    <Col span="20">
      <Row :gutter="5" style="padding:2px;">
        <Col span="5">
          <Button type="success" @click="add()">新增</Button>
        </Col>
      </Row>
      <Table border :columns="columns12" :data="data6">
        <template slot-scope="{ row }" slot="lineName">
          <strong>{{ row.lineName }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
          <Button type="error" size="small" @click="remove(index)">Delete</Button>
        </template>
      </Table>
      <div style="margin-top: 3px">
        <Page show-total :total="total" show-elevator show-sizer/>
      </div>
    </Col>

    <Modal
        v-model="modal1"
        title="新增数据源"
        @on-ok="ok"
        @on-cancel="cancel">
      <FormData></FormData>
    </Modal>

  </Row>
</template>

<script>
  import FormData from '@/views/FormData'

  export default {
    components: {FormData},
    mounted: function() {
      this.init()
    },
    data() {
      return {
        modal1: false,
        total: 10,
        columns12: [
          {
            title: '路线名称',
            slot: 'lineName'
          },
          {
            title: '管理单位',
            key: 'unitName'
          },
          {
            title: '地址',
            key: 'areaUnitAddress'
          },
          {
            title: 'Action',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        data1: [
          {
            title: 'parent 1',
            expand: true,
            children: [
              {
                title: 'parent 1-1',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-1-1'
                  },
                  {
                    title: 'leaf 1-1-2'
                  }
                ]
              },
              {
                title: 'parent 1-2',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-2-1'
                  },
                  {
                    title: 'leaf 1-2-1'
                  }
                ]
              }
            ]
          }
        ],
        data6: []
      }
    },
    methods: {
      init : function() {
        var _this = this
        this.$axios.get('/roadline/getRoadLines?page=1&rows=10')
            .then(function (response) {
              _this.data6 = response.data.rows
              _this.total = response.data.total
            })
            .catch(function (error) {
              console.log(error);
            });
      },
      show(index) {
        this.$Modal.info({
          title: '路线详情',
          content: `路线名称：${this.data6[index].lineName}<br>管理单位：${this.data6[index].unitName}<br>地址：${this.data6[index].areaUnitAddress}`
        })
      },
      remove(index) {
        this.data6.splice(index, 1);
      },
      add() {
        this.modal1 = true
      },
      ok() {

      },
      cancel() {

      }
    }
  }
</script>

<style scoped>
  .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    border-top: 1px solid #3399ff;
  }

  .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #3399ff;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>